<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>搜索</h1>
					<div id="box1" class="box">
						<h2>1. 创建 search   分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 search  子分支，用来开发分类页面相关的功能：</p>
						<code-mirror :value="code.code1" :options="cmOptions"> </code-mirror>
					</div>
					<div class="box" id="box2">
						<h2>2. 自定义搜索组件</h2>
						<div class="item" id="box2-1">
							<h3>2-1. 自定义 my-search 组件</h3>
							<ol>
								<li>
									<p>在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：</p>
									<el-image style="width: 100%;" :src="srcList[0]" fit="contain" :preview-src-list="srcList">
									</el-image>
								<li>
									<p>在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：</p>
									<code-mirror :value="code.code2" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>定义 my-search 组件的 UI 结构如下：</p>
									<code-mirror :value="code.code3" :options="cmOptions1"> </code-mirror>
									<div class="tip">
										注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框
									</div>
								</li>
								<li>
									<p>美化自定义 search 组件的样式：</p>
									<code-mirror :value="code.code4" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>由于自定义的 my-search 组件高度为 50px，因此，需要重新计算分类页面窗口的可用高度：</p>
									<code-mirror :value="code.code5" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-2">
							<h3>2-2. 通过自定义属性增强组件的通用性</h3>
							<p>为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。</p>
							<ol>
								<li>
									<p>通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：</p>
									<code-mirror :value="code.code6" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性：</p>
									<code-mirror :value="code.code7" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>移除对应 scss 样式中的 背景颜色 和 圆角尺寸：</p>
									<code-mirror :value="code.code8" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-3">
							<h3>2-3. 为自定义组件封装 click 事件</h3>
							<ul>
								<li>
									<p>在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数：</p>
									<code-mirror :value="code.code9" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 my-search 自定义组件的 methods 节点中，声明事件处理函数如下：</p>
									<code-mirror :value="code.code10" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函数：</p>
									<code-mirror :value="code.code11" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>同时在分类页面中，定义 gotoSearch 事件处理函数如下：</p>
									<code-mirror :value="code.code12" :options="cmOptions"> </code-mirror>
								</li>
							</ul>
						</div>
						<div class="item" id="box2-4">
							<h3>2-4. 实现首页搜索组件的吸顶效果</h3>
							<ol>
								<li>
									<p>在 home 首页定义如下的 UI 结构：</p>
									<code-mirror :value="code.code13" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 home 首页定义如下的事件处理函数：</p>
									<code-mirror :value="code.code14" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>通过如下的样式实现吸顶的效果：</p>
									<code-mirror :value="code.code15" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box3">
						<h2>3. 搜索建议</h2>
						<div class="item" id="box3-1">
							<h3>3-1. 渲染搜索页面的基本结构</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code.code16" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景：</p>
									<code-mirror :value="code.code17" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>实现搜索框的吸顶效果：</p>
									<code-mirror :value="code.code18" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>定义如下的 input 事件处理函数：</p>
									<code-mirror :value="code.code19" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
							<h3>3-1. 渲染搜索页面的基本结构</h3>
						</div>
						<div class="item" id="box3-2">
							<h3>3-2. 实现搜索框自动获取焦点</h3>
							<ol>
								<li>
									<p>修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可</p>
									<code-mirror :value="code.code20" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>使用手机扫码预览，即可在真机上查看效果。</p>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-3">
							<h3>3-3. 实现搜索框的防抖处理</h3>
							<ol>
								<li>
									<p>在 data 中定义防抖的延时器 timerId 如下：</p>
									<code-mirror :value="code.code21" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>修改 input 事件处理函数如下：</p>
									<code-mirror :value="code.code22" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-4">
							<h3>3-4. 根据关键词查询搜索建议列表</h3>
							<ol>
								<li>
									<p>在 data 中定义如下的数据节点，用来存放搜索建议的列表数据：</p>
									<code-mirror :value="code.code23" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在防抖的 setTimeout 中，调用 getSearchList 方法获取搜索建议列表：</p>
									<code-mirror :value="code.code24" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 methods 中定义 getSearchList 方法如下：</p>
									<code-mirror :value="code.code25" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-5">
							<h3>3-5. 渲染搜索建议列表</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code.code26" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化搜索建议列表：</p>
									<code-mirror :value="code.code27" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>点击搜索建议的 Item 项，跳转到商品详情页面：</p>
									<code-mirror :value="code.code28" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box4">
						<h2>4. 搜索历史</h2>
						<div class="item" id="box4-1">
							<h3>4-1. 渲染搜索历史记录的基本结构</h3>
							<ol>
								<li>
									<p>在 data 中定义搜索历史的假数据：</p>
									<code-mirror :value="code.code29" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>渲染搜索历史区域的 UI 结构：</p>
									<code-mirror :value="code.code30" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化搜索历史区域的样式：</p>
									<code-mirror :value="code.code31" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-2">
							<h3>4-2. 实现搜索建议和搜索历史的按需展示</h3>
							<ol>
								<li>
									<p>当搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域</p>
								</li>
								<li>
									<p>当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域</p>
								</li>
								<li>
									<p>使用 v-if 和 v-else 控制这两个区域的显示和隐藏，示例代码如下：</p>
									<code-mirror :value="code.code32" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-3">
							<h3>4-3. 将搜索关键词存入 historyList</h3>
							<ol>
								<li>
									<p>直接将搜索关键词 push 到 historyList 数组中即可</p>
									<code-mirror :value="code.code33" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>上述实现思路存在的问题：</p>
									<ul>
										<li>关键词前后顺序的问题（可以调用数组的 reverse() 方法对数组进行反转）</li>
										<li>关键词重复的问题（可以使用 Set 对象进行去重操作</li>
									</ul>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-4">
							<h3>4-4. 解决关键字前后顺序的问题</h3>
							<ol>
								<li>
									<p>data 中的 historyList 不做任何修改，依然使用 push 进行末尾追加</p>
								</li>
								<li>
									<p>定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值：</p>
									<code-mirror :value="code.code34" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys：</p>
									<code-mirror :value="code.code35" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-5">
							<h3>4-5. 解决关键词重复的问题</h3>
							<ol>
								<li>
									<p>修改 saveSearchHistory 方法如下：</p>
									<code-mirror :value="code.code36" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-6">
							<h3>4-6. 将搜索历史记录持久化存储到本地</h3>
							<ol>
								<li>
									<p>修改 saveSearchHistory 方法如下：</p>
									<code-mirror :value="code.code37" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 onLoad 生命周期函数中，加载本地存储的搜索历史记录：</p>
									<code-mirror :value="code.code38" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-7">
							<h3>4-7. 清空搜索历史记录</h3>
							<ol>
								<li>
									<p>为清空的图标按钮绑定 click 事件：</p>
									<code-mirror :value="code.code39" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 methods 中定义 cleanHistory 处理函数：</p>
									<code-mirror :value="code.code40" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-8">
							<h3>4-8. 点击搜索历史跳转到商品列表页面</h3>
							<ol>
								<li>
									<p>为搜索历史的 Item 项绑定 click 事件处理函数：</p>
									<code-mirror :value="code.code41" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 methods 中定义 gotoGoodsList 处理函数：</p>
									<code-mirror :value="code.code42" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					
					<div id="box5" class="box">
						<h2>5. 分支的合并与提交</h2>
						<ol>
							<li>
								<p>将 search  分支进行本地提交：</p>
								<code-mirror :value="code.code43" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地的 search  分支推送到码云：</p>
								<code-mirror :value="code.code44" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地 search  分支中的代码合并到 master 分支：</p>
								<code-mirror :value="code.code45" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>删除本地的 search  分支：</p>
								<code-mirror :value="code.code46" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 search   分支" />
					<a-anchor-link href="#box2" title="2. 自定义搜索组件" >
						<a-anchor-link href="#box2-1" title="2-1. 自定义 my-search 组件" />
						<a-anchor-link href="#box2-2" title="2-2. 通过自定义属性增强组件的通用性" />
						<a-anchor-link href="#box2-3" title="2-3. 为自定义组件封装 click 事件" />
						<a-anchor-link href="#box2-4" title="2-4. 实现首页搜索组件的吸顶效果" />
					</a-anchor-link>
					<a-anchor-link href="#box3" title="3. 搜索建议" >
						<a-anchor-link href="#box3-1" title="3-1. 渲染搜索页面的基本结构" />
						<a-anchor-link href="#box3-2" title="3-2. 实现搜索框自动获取焦点" />
						<a-anchor-link href="#box3-3" title="3-3. 实现搜索框的防抖处理" />
						<a-anchor-link href="#box3-4" title="3-4. 根据关键词查询搜索建议列表" />
						<a-anchor-link href="#box3-5" title="3-5. 渲染搜索建议列表" />
					</a-anchor-link >
					<a-anchor-link href="#box4" title="4. 搜索历史" >
						<a-anchor-link href="#box4-1" title="4-1. 渲染搜索历史记录的基本结构" />
						<a-anchor-link href="#box4-2" title="4-2. 实现搜索建议和搜索历史的按需展示" />
						<a-anchor-link href="#box4-3" title="4-3. 将搜索关键词存入 historyList" />
						<a-anchor-link href="#box4-4" title="4-4. 解决关键字前后顺序的问题" />
						<a-anchor-link href="#box4-5" title="4-5. 解决关键词重复的问题" />
						<a-anchor-link href="#box4-6" title="4-6. 将搜索历史记录持久化存储到本地" />
						<a-anchor-link href="#box4-7" title="4-7. 清空搜索历史记录" />
						<a-anchor-link href="#box4-8" title="4-8. 点击搜索历史跳转到商品列表页面" />
					</a-anchor-link>
					<a-anchor-link href="#box5" title="5. 分支的合并与提交" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import {
		searchView
	} from '../../util/code.js'
	import img1 from '@/assets/search.png'
	export default {
		name: 'searchView',
		data() {
			return {
				srcList: [
					img1
				],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				code: searchView
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
